<template>
  <el-container>
    <el-aside width="220px"><AsideMenu /></el-aside>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in routes" :key="item">{{
            item.meta.title
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import AsideMenu from "@/components/AsideMenu.vue";
export default {
  data() {
    return {
      routes: [],
      currentPage: 1,
      dataCount: null,
    };
  },
  created() {
    this.routes = this.$route.matched;
  },
  watch: {
    $route(to) {
      this.routes = to.matched;
    },
  },
  components: {
    AsideMenu,
  },
};
</script>

<style>
.el-header {
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}
.el-breadcrumb {
  margin-top: 10px;
}
</style>
